<template>
  <uni-nav-bar title="补液" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package" v-if="fillOr">
    <view class="space-between"><text>出液机</text><text>{{fillOr.name}}</text></view>
    <view class="space-between" style="margin: 10rpx 0px;"><text>溶液存量</text><text>{{fillOr.count}}公斤</text></view>
    <view class="space-between"><text>本次最大出液量</text><text>{{fillOr.max}}公斤</text></view>
  </view>
  <view class="package space-between">
    <view>受液机</view>
    <view class="center">
      <text style="margin-right: 10rpx;"
        v-if="fillCode.length<2">{{receiverfilling.name?receiverfilling.name:'暂无受液机'}}</text>
      <view v-else class="lists">
        <hpy-form-select :dataList="fillCode" :value="'1'" text="name" name="value" @change="liquid"
          :Text="receiverfilling.name" state='admin' :icon='true' />
      </view>
    </view>
  </view>
  <view class="package space-between">
    <view class="center">
      <text style="margin-right: 50rpx;">下单量</text>
      <hpy-form-select :dataList="solutionList" :value="'1'" text="text" name="value" @change="consolu" :title="Filling"
        :Text="Filling" />
    </view>
    <view>公斤</view>
  </view>
  <view class="submit" style="background: #1B91FF;color:#fff;margin-top:80rpx" @click="submit()">提交</view>
  <view class="submit" @click="navTo('keyRehydration/filling/fluidList')">查看记录</view>
</template>

<script setup lang="ts">
  import { navBack, navTo } from '@/utils/navigator';
  import { showLoading, errorToast, successToast } from '@/utils/prompt';
  import { getFillList, getFillInfo } from '@/gql/keyeRehydrator';
  import { toPublish } from '@mqtt';
  import { getDriverID } from '@/stores/driverID';
  import { ref, Ref } from 'vue';
  import { fillingStation } from '@/stores/keyRehydration';
  /**
   * 加注机详情页面
   * @param {Number} Filling 默认加注量
   * @param {Array} solutionList 加注量数组
   * @param {Array} fillCode 受液机列表
   * @param {Object} receiverfilling 受液机信息
   * @param {String} fill_id 加注机ID
   * @param {Object} fillOr 加注机详细信息
   */
  const fillingInfo = fillingStation();
  const Filling = ref(50); //加注量
  const solutionList = [50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 800, 1000, 1500, 2000]; // 加注量
  const fillCode = ref([]); //受液机列表
  const receiverfilling : Ref<any> = ref({}); //受液机信息
  const fill_id = uni.getStorageSync('fillingID').toString();
  const fillOr = ref({})
  fillAll()
  function fillAll() {
    showLoading('加载中');
    const payload = {
      query: getFillInfo,
      variables: { fill_id },
    };
    toPublish(
      'ql/delivery_customersQL/getFillInfo',
      payload,
      (obj : any) => {
        const { getFillInfo } = obj.data;
        fillOr.value = getFillInfo
      },
    );
  }
  //授液机列表
  init()
  function init() {
    showLoading('加载中');
    const payload = {
      query: getFillList,
      variables: { delivery_id: fillingInfo.id },
    };
    toPublish(
      'ql/delivery_customersQL/getFillList',
      payload,
      (obj : any) => {
        const { getFillList } = obj.data;
        fillCode.value = getFillList;
        receiverfilling.value = getFillList.length > 0 ? getFillList[0] : '';
      },
    );
  }
  /**
   * 受液机
   * @param {Object} e 当前选中受液机信息
   */
  function liquid(e : any) {
    receiverfilling.value = e.data;
  }
  /**
   * 加注量
   * @param {Object} e 当前选中加注量
   */
  function consolu(e : any) {
    Filling.value = e.data;
  }
  /**
   * 提交补液订单
   * @param {String} from_fill_id 出液机ID
   * @param {Number} to_fill_id 受液机ID
   * @param {Number} amount 加注量
   * @param {Number} delivery_id 店铺id
   * @param {Number} driver_id 用户ID
   */
  function submit() {
    showLoading('加载中');
    const payload = {
      from_fill_id: fill_id,
      to_fill_id: receiverfilling.value.id,
      amount: Filling.value,
      delivery_id: fillingInfo.id,
      driver_id: getDriverID()
    };
    toPublish(
      'delivery_customersQL/addUrea',
      payload,
      (obj : any) => {
        const { code, msg } = obj;
        if (code === 1) {
          fillAll()
          fillingInfo.getDeliveryIn()
          successToast(msg)
        } else {
          errorToast(msg)
        }
      },
    );
  }
</script>

<style scoped lang="less">
  .submit {
    width: 480rpx;
    height: 80rpx;
    border-radius: 5px;
    border: 1px solid #1B91FF;
    box-sizing: border-box;
    text-align: center;
    line-height: 80rpx;
    margin: 20rpx auto;
    color: #1B91FF;
  }
</style>
<style>
  .lists>>>.select-picker {
    justify-content: flex-end;
    text-align: right;
  }
</style>